<template>
	<view>
		<!-- 头像姓名等 -->
		<view style="display: flex;flex-direction: column;align-items: center;">
			<view style="position: relative">
				<image :src="this.data.avatar || avatar" mode="" style="width: 80px;height: 80px;"></image>
				<view style="padding: 0px 4px;border-radius: 4px; position: absolute;right: 0;bottom: 0;background-color: #D5B576;">
					<text style="font-size: 10px;color: #333;">v</text>
					<text style="font-size: 12px;color: #333;">20</text>
				</view>
			</view>
			<text style="font-size: 18px;color: #0D0D0D;margin-top: 4px;">{{this.data.name}}</text>
			<view style="position: relative;">
				<view style="margin-top: 5px;">
					<text style="font-size: 12px;color: #232830;">{{this.data.city}}</text>
					<text style="font-size: 12px;color: #232830;margin-left: 22px;">{{this.data.position_str}}</text>
				</view>
				<view @tap="publishTask" style="position: absolute;right: -88px;top: 50%;margin-top: -12px;" :style="{textAlign:'center',lineHeight:'24px',borderRadius:'4px',fontSize:'12px',color:'#fff',backgroundColor:'#E61717',width:'50px',height:'24px'}">发任务</view>
			</view>
			<image src="@/static/images/userinfo_service_icon.png" mode="" style="width: 132px;height: 30px;margin-top: 5px;"></image>
		</view>
		<!-- 表格 -->
		<view>
			<view style="display: flex;flex-direction: row;padding-left: 23px;padding-right: 23px;margin-top: 15px;">
				<view style="flex: 1;margin-left: -1px; height: 30px;color: #999999;font-size: 12px;border: 1px solid rgba(0, 0, 0, 0.1);line-height: 30px;text-align: center;">昨日浏览量</view>
				<view style="flex: 1;margin-left: -1px; height: 30px;color: #999999;font-size: 12px;border: 1px solid rgba(0, 0, 0, 0.1);line-height: 30px;text-align: center;">总浏览量</view>
				<view style="flex: 1;margin-left: -1px; height: 30px;color: #999999;font-size: 12px;border: 1px solid rgba(0, 0, 0, 0.1);line-height: 30px;text-align: center;">收藏量</view>
			</view>
			<view style="display: flex;flex-direction: row;padding-left: 23px;padding-right: 23px;">
				<view style="flex: 1;margin-left: -1px;margin-top: -1px; height: 30px;color: #232830;font-size: 16px;border: 1px solid rgba(0, 0, 0, 0.1);line-height: 30px;text-align: center;">{{this.data.y_log}}</view>
				<view style="flex: 1;margin-left: -1px;margin-top: -1px; height: 30px;color: #232830;font-size: 16px;border: 1px solid rgba(0, 0, 0, 0.1);line-height: 30px;text-align: center;">{{this.data.view_log}}</view>
				<view style="flex: 1;margin-left: -1px;margin-top: -1px; height: 30px;color: #232830;font-size: 16px;border: 1px solid rgba(0, 0, 0, 0.1);line-height: 30px;text-align: center;">{{this.data.forcus_num}}</view>
			</view>
		</view>
		<!-- 信息 -->
		<view style="margin-top:10px; display: flex;flex-direction: row;justify-content: space-between;padding-left: 23px;padding-right: 23px;">
			<view style="display: flex;flex-direction: column;">
				<view>
					<text style="color: #666666;font-size: 12px;">性别:</text>
					<text style="color: #111111;font-size: 12px;font-weight: 500;">{{this.data.sex}}</text>
				</view>
				<view style="margin-top: 5px;">
					<text style="color: #666666;font-size: 12px;">职业:</text>
					<text style="color: #111111;font-size: 12px;font-weight: 500;">{{this.data.position_name}}</text>
				</view>
			</view>

			<view style="display: flex;flex-direction: column;">
				<view>
					<text style="color: #666666;font-size: 12px;">年龄:</text>
					<text style="color: #111111;font-size: 12px;font-weight: 500;">{{this.data.age}}</text>
				</view>
				<view style="margin-top: 5px;">
					<text style="color: #666666;font-size: 12px;">证号:</text>
					<text style="color: #111111;font-size: 12px;font-weight: 500;">{{this.data.position}}</text>
				</view>
			</view>

			<view style="display: flex;flex-direction: column;">
				<view>
					<text style="color: #666666;font-size: 12px;">学历:</text>
					<text style="color: #111111;font-size: 12px;font-weight: 500;">{{this.data.education}}</text>
				</view>
			</view>
		</view>

		<view v-if="data.task_list.length > 0" style="display: flex;justify-content: center;align-items: center;margin-top: 21px;">
			<view style="width: 100px;height: 40px;line-height: 40px;border-radius: 4px;background-color: rgba(0, 0, 0, 0.1);olor: rgba(35, 40, 48, 100);font-size: 16px;font-weight: 500;text-align: center;border: 1px solid rgba(255, 255, 255, 100);">
				项目分析
			</view>
		</view>
		<!-- 饼状图 -->
		<view v-if="data.task_list.length > 0" style="display: flex;justify-content: center;align-items: center;">
			<canvas canvas-id="canvasPie" id="canvasPie" class="charts" :width="300" :height="200" :style="{'width':'300px','height':'200px'}"></canvas>
		</view>

		<view style="display: flex;justify-content: center;align-items: center;margin-top: 21px;">
			<view style="width: 100px;height: 40px;line-height: 40px;border-radius: 4px;background-color: rgba(0, 0, 0, 0.1);olor: rgba(35, 40, 48, 100);font-size: 16px;font-weight: 500;text-align: center;border: 1px solid rgba(255, 255, 255, 100);">
				项目分析
			</view>
		</view>
		<!-- 雷达图 -->
		<view style="display: flex;justify-content: center;align-items: center;margin-top: 10px;">
			<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts" :width="300" :height="200" :style="{'width':'300px','height':'200px'}"></canvas>
		</view>

		<view style="height: 42px;margin-top:10px; display: flex;flex-direction: row;justify-content: space-between;padding-left: 23px;padding-right: 23px;">
			<view>
				<text style="color: #666666;font-size: 12px;">共完成:</text>
				<text style="color: #111111;font-size: 12px;font-weight: 500;">{{this.data.task_total}}个</text>
			</view>

			<view>
				<text style="color: #666666;font-size: 12px;">总收入:</text>
				<text style="color: #111111;font-size: 12px;font-weight: 500;">{{this.data.total_cash}}元</text>
			</view>

			<view>
				<text style="color: #666666;font-size: 12px;">好评率:</text>
				<text style="color: #111111;font-size: 12px;font-weight: 500;">{{this.data.good_comment_count/this.data.comment_count * 100}}%</text>
			</view>
		</view>

	</view>
</template>

<script>
	import uCharts from '@/components/uCharts/u-charts.js';
	var canvaRadar = null;
	var canvaPie = null;
	var _self;
	import {
		userInfoDetail
	} from "@/apis/user";
	export default {
		data() {
			return {
				uid: '',
				data: {
					task_list: [],
				},
				avatar: require("@/static/images/default.png")
			}
		},
		onLoad(option) {
			this.uid = option.uid;
			_self = this;
			userInfoDetail({
				service_uid: this.uid
			}).then(resp => {
				console.log(resp);
				this.data = resp.data;
				this.reloadAnalyseChart(this.data.task_list);
				this.reloadAbilityChart(this.data.chart_two_data);
			});
		},
		methods: {
			publishTask() { 
				alert(1);
			},
			reloadAnalyseChart(series) {
				let _data = series.map(d => {
					return {
						data: d.num,
						name: d.name || ""
					};
				})
				canvaPie = new uCharts({
					$this: _self,
					canvasId: 'canvasPie',
					type: 'pie',
					fontSize: 11,
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: 1,
					series: _data,
					animation: true,
					width: 300,
					height: 200,
					dataLabel: true,
					extra: {
						pie: {
							lableWidth: 15
						}
					},
				});
			},
			reloadAbilityChart(chartData) {
				console.log(chartData);
				let categories = chartData.indicator.map(item => {
					return item.name;
				});
				canvaRadar = new uCharts({
					$this: _self,
					canvasId: 'canvasRadar',
					type: 'radar',
					fontSize: 11,
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: 1,
					animation: true,
					dataLabel: true,
					categories: categories,
					series: [{
						name: chartData.data.name || '',
						data: chartData.data.value
					}],
					width: 300,
					height: 200,
					extra: {
						radar: {
							max: 100 //雷达数值的最大值
						}
					}
				});
			}
		}
	}
</script>

<style>
</style>
